<template>
	<!-- #ifndef MP-TOUTIAO -->
	<div class='navbar' :style="[navbarStyle]">
		<div class='navbar-fixed' :class='{ "border-bottom": borderBottom }' :style='[navbarFixedStyle]'>
			<div class="navbar-state" :style='[stateBarStyle]'></div>
			<div class="navbar-nav" :style='[navbarBarStyle]'>
				<div class="navbar-search" v-if="navType === 'search'">
					<image :src="$surl('/logo.jpg')" class='logo' mode="heightFix" @click='toHome' />
					<div class="navbar-input" @click='toSearch'>
						<i class='iconfont icon-search'></i>
						<span class='placeholder line-1'>搜索</span>
					</div>
				</div>

				<div class="navbar-title" v-else-if="navType === 'title'">
					<div class="navbar-icon">
						<i class="iconfont icon-return" @click='toBack'></i>
						<div class="line"></div>
						<i class="iconfont icon-home" @click='toHome'></i>
					</div>
					<div class="title-box">
						<span class="line-1">{{ title }}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- #endif -->
</template>

<script setup>
	import { computed } from 'vue';
	import config from '@/config/index.js'
	import tools from '@/utils/tools/index.js'
	import { useSystemStore } from '@/store/system.js'

	const props = defineProps({
		fixed: { type: Boolean, default: true },
		navType: { type: String, default: 'title' },
		title: { type: String, default: config.projectName },
		background: { type: String, default: '#fff' },
		borderBottom: { type: Boolean, default: false },
	})

	const systemStore = useSystemStore();

	const navbarInfo = computed(() => systemStore.navbarInfo);
	const capsuleInfoLeft = computed(() => systemStore.capsuleInfoLeft);

	const navbarStyle = computed(() => ({
		height: navbarInfo['value']['total'] + 'px'
	}));

	const navbarFixedStyle = computed(() => ({
		background: props.background,
		position: props.fixed ? 'fixed' : 'static'
	}));

	const stateBarStyle = computed(() => ({
		height: navbarInfo['value']['statusBar'] + 'px'
	}));

	const navbarBarStyle = computed(() => ({
		height: navbarInfo['value']['navigationBar'] + 'px',
		width: props.navType === 'title' ? '100%' : capsuleInfoLeft['value']
	}));

	function toHome() {
		const curPage = tools.prePage(0).route;
		if (curPage === 'pages/index/index') {
			uni.pageScrollTo({ scrollTop: 0, duration: 300 });
		} else {
			uni.switchTab({ url: '/pages/index/index' })
		}
	}

	function toBack() {
		const routes = getCurrentPages();
		if (routes.length === 1) {
			uni.switchTab({ url: '/pages/index/index' })
		} else {
			uni.navigateBack({ delta: 1 })
		}
	}

	function toSearch() {
		uni.navigateTo({
			url: '/pages/sub/main/search/index?q='
		})
	}
</script>

<style lang="scss" scoped>
	.navbar {
		height: calc(var(--status-bar-height) + 90rpx);
		width: 100%;

		.navbar-fixed {
			z-index: 999;
			width: 100%;
			background: #fff;
			top: 0;
			left: 0;

			.navbar-state {
				width: 100%;
				height: var(--status-bar-height);
			}

			.navbar-nav {
				height: 90rpx;
				width: 100%;
				box-sizing: border-box;
				position: relative;
				z-index: 1;

				.navbar-title {
					display: flex;
					align-items: center;
					height: 100%;
					padding: 0 $side-width;
					box-sizing: border-box;

					.navbar-icon {
						display: flex;
						align-items: center;
						padding: 6rpx 18rpx 6rpx 16rpx;
						border-radius: 100px;
						border: 1px solid $uv-border-color;
						opacity: 0.8;

						.iconfont {
							font-size: 42rpx;
							color: $uv-content-color;
						}

						.line {
							width: 1px;
							height: 32rpx;
							margin: 0px 18rpx;
							background: $uv-border-color;
						}
					}

					.title-box {
						width: 100%;
						z-index: -1;
						position: absolute;
						text-align: center;
						font-size: 36rpx;
						font-weight: 500;
						left: 0;

						span {
							width: 45%;
						}
					}
				}

				.navbar-search {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 100%;
					padding: 0 $side-width;

					.logo {
						height: 50rpx;
						flex-shrink: 1;
					}

					.navbar-input {
						flex: 1;
						height: 68rpx;
						line-height: 68rpx;
						/* #ifdef MP */
						height: 64rpx;
						line-height: 64rpx;
						/* #endif */
						display: flex;
						align-items: center;
						background-color: $search-color;
						border-radius: 100px;
						margin-left: $side-width;

						.icon-search {
							color: $uv-tips-color;
							font-weight: 500;
							font-size: 36rpx;
							padding: 0 10rpx 0 20rpx;
						}

						.placeholder {
							white-space: nowrap;
							font-size: 28rpx;
						}
					}
				}
			}
		}
	}
</style>